<script setup lang="ts">
import { ref, watch } from 'vue'
import { WarningFilled, InfoFilled } from '@element-plus/icons-vue'

interface Props {
	modelValue: boolean
	loading?: boolean
}

interface Emits {
	(e: 'update:modelValue', value: boolean): void
	(e: 'confirm'): void
	(e: 'cancel'): void
}

const props = withDefaults(defineProps<Props>(), {
	loading: false
})

const emit = defineEmits<Emits>()

// 弹窗显示状态
const dialogVisible = ref(false)

// 监听 modelValue 变化
watch(() => props.modelValue, (newVal) => {
	dialogVisible.value = newVal
}, { immediate: true })

// 监听 dialogVisible 变化，同步到父组件
watch(dialogVisible, (newVal) => {
	emit('update:modelValue', newVal)
})

// 确认提交
const handleConfirm = () => {
	emit('confirm')
}

// 取消提交
const handleCancel = () => {
	emit('cancel')
	dialogVisible.value = false
}
</script>

<template>
	<el-dialog
		v-model="dialogVisible"
		title="提交年度确认申请"
		width="500px"
		:close-on-click-modal="false"
		:close-on-press-escape="false"
	>
		<div class="text-center">
			<!-- 警告图标 -->
			<div class="mb-4 flex justify-center">
				<el-icon
					:size="48"
					class="text-warning"
				>
					<WarningFilled />
				</el-icon>
			</div>
			
			<!-- 主要提示文字 -->
			<div class="text-lg font-medium text-primary mb-4">
				请确认相关材料已准备完整
			</div>
			
			<!-- 详细说明 -->
			<div class="text-sm text-secondary mb-6 text-left">
				<div class="bg-background-secondary p-4 rounded-lg">
					<div class="mb-2 font-medium text-primary">提交前请确保已上传：</div>
					<ul class="space-y-1 list-disc list-inside text-foreground-secondary">
						<li>身份证正反面照片（清晰完整）</li>
						<li>近期免冠照片（用于人脸识别）</li>
						<li>运动员资质证书</li>
						<li>其他相关证明材料（如有更新）</li>
					</ul>
				</div>
			</div>
			
			<!-- 确认信息 -->
			<div class="text-sm text-secondary mb-6">
				<div class="p-3 bg-blue-50 border-l-4 border-blue-400 text-left">
					<div class="flex">
						<div class="flex-shrink-0">
							<el-icon class="text-blue-400">
								<InfoFilled />
							</el-icon>
						</div>
						<div class="ml-3">
							<p class="text-sm text-blue-700">
								提交后将进入审核流程，请确保填写信息真实有效。审核期间无法修改信息，如需调整请在提交前完成。
							</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<template #footer>
			<div class="flex justify-end gap-3">
				<el-button
					@click="handleCancel"
				>
					取消提交
				</el-button>
				<el-button
					type="primary"
					:loading="loading"
					@click="handleConfirm"
				>
					确认提交
				</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<style lang="scss" scoped>
:deep(.el-dialog__header) {
	padding-bottom: 15px;
	text-align: center;
	border-bottom: 1px solid var(--el-border-color-light);
}
:deep(.el-dialog__body) {
	padding: 24px;
}
:deep(.el-dialog__footer) {
	padding: 15px 24px 24px;
	border-top: 1px solid var(--el-border-color-light);
}
</style>